<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <title>設定輸入法</title>
    </head>
    <body>

        <div id="navbar_top">
            <nav class="nav navbar-inverse navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbars">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span> 
                        </button>
                        <a class="navbar-brand">
                            <img src="icon.ico">
                        </a>
                    </div>
                    <div id="navbars" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="dropdown active">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">一般設定<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li class="active"><a data-toggle="tab" href="#typing_page">打字行為</a></li>
                                    <li id="intelligent_ddmenu" style="display:none;"><a data-toggle="tab" href="#intelligent_page">智能輸入</a></li>
                                    <li><a data-toggle="tab" href="#ui_page">介面外觀</a></li>
                                    <li id="keyboard_ddmenu" style="display:none;"><a data-toggle="tab" href="#keyboard_page">鍵盤設定</a></li>
                                </ul>
                            </li>

                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">碼表設定<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a data-toggle="tab" href="#cin_page">輸入法碼表</a></li>
                                    <li><a data-toggle="tab" href="#extendtable_page">擴展碼表</a></li>
                                </ul>
                            </li>

                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">符號設定<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a data-toggle="tab" href="#symbols_page">特殊符號</a></li>
                                    <li><a data-toggle="tab" href="#fs_symbols_page">全形標點</a></li>
                                    <li><a data-toggle="tab" href="#ez_symbols_page">簡易符號</a></li>
                                </ul>
                            </li>

                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">其它設定<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a data-toggle="tab" href="#phrase_page">聯想字詞</a></li>
                                    <li><a data-toggle="tab" href="#flangs_page">外語文字</a></li>
                                </ul>
                            </li>

                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">說明<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a data-toggle="tab" href="#help_page">使用說明</a></li>
                                    <li><a data-toggle="tab" href="#about_page">關於</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <nav class="nav navbar-inverse navbar-hidden">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span> 
                        </button>
                        <a class="navbar-brand">
                            <img src="icon.ico">
                        </a>
                    </div>
                </div>
            </nav>
        </div>

        <div id="typing_page">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">預設狀態</h3>
                        </div>
                        <div class="panel-body">
                            <input type="checkbox" id="defaultFullSpace" name="defaultFullSpace" />
                            <label for="defaultFullSpace">預設以全形模式啟動</label><br />

                            <input type="checkbox" id="defaultEnglish" name="defaultEnglish" />
                            <label for="defaultEnglish">預設以英文模式啟動</label><br />

                            <input type="checkbox" id="disableOnStartup" name="disableOnStartup" />
                            <label for="disableOnStartup">預設以停用輸入法模式啟動 (Windows 8 以上適用)</label><br />
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">行為設定</h3>
                        </div>
                        <div class="panel-body">
                            <input type="checkbox" id="switchLangWithShift" name="switchLangWithShift" />
                            <label for="switchLangWithShift">使用 Shift 快速切換中英文</label><br />

                            <label for="switchLangWithWhichShift">使用哪一邊的 Shift 來切換中英文模式: </label>
                            <select name="switchLangWithWhichShift" id="switchLangWithWhichShift"></select>
                            <br />

                            <input type="checkbox" id="autoClearCompositionChar" name="autoClearCompositionChar" />
                            <label for="autoClearCompositionChar">拆錯字碼時自動清除輸入字串</label><br />

                            <input type="checkbox" id="playSoundWhenNonCand" name="playSoundWhenNonCand" />
                            <label for="playSoundWhenNonCand">拆錯字碼時發出警告嗶聲提示</label><br />
                         </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">候選清單</h3>
                        </div>
                        <div class="panel-body">
                            <input type="checkbox" id="switchPageWithSpace" name="switchPageWithSpace" />
                            <label for="switchPageWithSpace">使用空白鍵作為候選清單換頁鍵</label><br />

                            <input type="checkbox" id="sortByPhrase" name="sortByPhrase" />
                            <label for="sortByPhrase">優先以聯想字詞排序候選清單</label><br />

                            <input type="checkbox" id="directShowCand" name="directShowCand" />
                            <label for="directShowCand">直接顯示候選字清單 (不須按空白鍵)</label><br />
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">輸出設定</h3>
                        </div>
                        <div class="panel-body">
                            <input type="checkbox" id="outputSmallLetterWithShift" name="outputSmallLetterWithShift" />
                            <label for="outputSmallLetterWithShift">押住 Shift 輸出英文時依 Caps 燈號切換大小寫</label>
                            <span class="glyphicon glyphicon-question-sign glyphicon-size18 text-info pointerCursor"
                                data-toggle="popover" data-html="true" data-trigger="hover" data-placement="auto bottom" title="押住 Shift 輸出英文時依 Caps 燈號切換大小寫"
                                data-content="在打字行為功能頁面裡，您可以啟用這個選項以讓押住 Shift 輸出英文時依 Caps 燈號切換大小寫。<br /><br />例如：<br />Caps 燈號點亮時輸出英文大寫。<br />Caps 燈號關閉時輸出英文小寫。"
                            ></span><br />

                            <input type="checkbox" id="outputSimpChinese" name="outputSimpChinese" />
                            <label for="outputSimpChinese">輸出時轉換為簡體中文</label><br />

                            <input type="checkbox" id="enableSwitchTCSC" name="enableSwitchTCSC" />
                            <label for="enableSwitchTCSC">使用 Ctrl+F12 切換繁體/簡體</label><br />

                            <input type="checkbox" id="directCommitSymbol" name="directCommitSymbol" />
                            <label for="directCommitSymbol">標點符號自動確認輸入</label>
                            <span class="glyphicon glyphicon-question-sign glyphicon-size18 text-info pointerCursor"
                                data-toggle="popover" data-html="true" data-trigger="hover" data-placement="auto bottom" title="標點符號自動確認輸入"
                                data-content="在打字行為功能頁面裡，您可以啟用這個選項以便利符號輸入。<br /><br />啟用後只要您以內建的符號輸入方式鍵入標點符號，如果下一個輸入的字元為輸入法的字根鍵，即會自動輸出符號。<br /><br />本輸入法有以下兩種內建的符號方式：<br /><br />1.「Ctrl」鍵須押住，且僅可以搭配『 <font color='red'>[ ] ; ' \ , . /</font> 』按鍵輸入符號：<br />您也可以押住「Ctrl」鍵及「SHIFT」鍵搭配以上符號鍵使用。<br /><br />2. 先輸入前導字元「`」鍵後，再按下符號鍵或數字鍵，即可輸入全形標點符號。<br />您也可以在輸入前導字元「`」鍵後，押住「SHIFT」鍵，再按下符號鍵來輸入符號。<br /><br />若使用輸入法碼表中所定義的符號編碼輸出全形符號，則只支援「，」、「。」、「、」、「；」、「？」、「！」這幾個全形符號。"
                            ></span><br />

                            <input type="checkbox" id="directOutMSymbols" name="directOutMSymbols" />
                            <label for="directOutMSymbols">允許內建符號輸入方式連續輸入</label>
                            <span class="glyphicon glyphicon-question-sign glyphicon-size18 text-info pointerCursor"
                                data-toggle="popover" data-html="true" data-trigger="hover" data-placement="auto bottom" title="允許內建符號輸入方式連續輸入"
                                data-content="在打字行為功能頁面裡，您可以啟用這個選項以連續輸入符號。<br /><br />啟用後只要您以內建的符號輸入方式鍵入標點符號，如果下一個輸入的字元一樣是標點符號，即會自動輸出之前所輸入的符號。<br /><br />本輸入法有以下兩種內建的符號方式：<br /><br />1.「Ctrl」鍵須押住，且僅可以搭配『 <font color='red'>[ ] ; ' \ , . /</font> 』按鍵輸入符號：<br />您也可以押住「Ctrl」鍵及「SHIFT」鍵搭配以上符號鍵使用。<br /><br />2. 先輸入前導字元「`」鍵後，再按下符號鍵或數字鍵，即可輸入全形標點符號。<br />您也可以在輸入前導字元「`」鍵後，押住「SHIFT」鍵，再按下符號鍵來輸入符號。"
                            ></span><br />
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">其它設定</h3>
                        </div>
                        <div class="panel-body">
                            <label>提示訊息顯示時間: </label>
                            <select name="messageDurationTime" id="messageDurationTime"></select>
                            <span class="glyphicon glyphicon-question-sign glyphicon-size18 text-info pointerCursor"
                                data-toggle="popover" data-html="true" data-trigger="hover" data-placement="auto bottom" title="提示訊息顯示時間"
                                data-content="在打字行為功能頁面裡，您可以變更這個選項以設定提示訊息的顯示時間。<br /><br />0 為不顯示、1 ~ 5 為顯示秒數。<br /><br />此顯示時間設定會套用到所有的提示訊息。"
                            ></span><br />

                            <input type="checkbox" id="hidePromptMessages" name="hidePromptMessages" />
                            <label for="hidePromptMessages">隱藏不必要的提示訊息</label>
                            <span class="glyphicon glyphicon-question-sign glyphicon-size18 text-info pointerCursor"
                                data-toggle="popover" data-html="true" data-trigger="hover" data-placement="auto bottom" title="隱藏不必要的提示訊息"
                                data-content="在打字行為功能頁面裡，您可以啟用這個選項以隱藏不必要的提示訊息。<br /><br />啟用後將隱藏一些不必要的提示訊息，以避免輸入時造成干擾。<br /><br />此設定會套用到「多功能前導字元」、「中英文模式」及「半全形模式」的提示訊息。"
                            ></span><br />

                            <input type="checkbox" id="supportWildcard" name="supportWildcard" />
                            <label for="supportWildcard">萬用字元查詢, 按鍵: </label>
                            <select name="selWildcardType" id="selWildcardType"></select>
                            <span class="glyphicon glyphicon-question-sign glyphicon-size18 text-info pointerCursor"
                                data-toggle="popover" data-html="true" data-trigger="hover" data-placement="auto bottom" title="萬用字元查詢"
                                data-content="在打字行為功能頁面裡，您可以啟用這個選項以所設定的萬用字元鍵來查詢不會拼的字。<br /><br />啟用後您可以在輸入時以萬用字元鍵取代不確定的字根，每一個萬用字元僅能取代單一字根。<br /><br />並且在萬用字元查詢清單選擇所要的字並輸出後，會提示該字的字根，以方便用戶記憶字根。"
                            ></span><br />

                            <input type="checkbox" id="imeReverseLookup" name="imeReverseLookup" />
                            <label for="imeReverseLookup">反查輸入字根: </label>
                            <select name="selRCinType" id="selRCinType"></select>
                            <span class="glyphicon glyphicon-question-sign glyphicon-size18 text-info pointerCursor"
                                data-toggle="popover" data-html="true" data-trigger="hover" data-placement="auto bottom" title="反查輸入字根"
                                data-content="在打字行為功能頁面裡，您可以啟用這個選項以查詢其它輸入法碼表的字根。<br /><br />啟用後您可以利用此輸入法的輸入方式，來輸入其它輸入法所不會拼的字。<br /><br />並且在候選清單選擇所要的字並輸出後，會提示該字在其它輸入法碼表的字根，以方便用戶記憶字根。"
                            ></span><br />

                            <input type="checkbox" id="homophoneQuery" name="homophoneQuery" />
                            <label for="homophoneQuery">同音字查詢: </label>
                            <select name="selHCinType" id="selHCinType"></select>
                            <span class="glyphicon glyphicon-question-sign glyphicon-size18 text-info pointerCursor"
                                data-toggle="popover" data-html="true" data-trigger="hover" data-placement="auto bottom" title="同音字查詢"
                                data-content="在打字行為功能頁面裡，您可以啟用這個選項以讀音相同的字來查詢不會拼的字。<br /><br />啟用後您可以在輸入讀音相同的字後，於候選清單顯示時按下「`」鍵，候選清單即會列出所有的同音字。<br /><br />並且在同音字查詢清單選擇所要的字並輸出後，會提示該同音字的字根，以方便用戶記憶字根。"
                            ></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div id="intelligent_page">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">智能輸入</h3>
                        </div>
                        <div class="panel-body">
                            <input type="checkbox" id="compositionBufferMode" name="compositionBufferMode" />
                            <label for="compositionBufferMode">啟用組字編輯模式</label><br />

                            <input type="checkbox" id="autoMoveCursorInBrackets" name="autoMoveCursorInBrackets" />
                            <label for="autoMoveCursorInBrackets">自動移動組字游標至括號中間</label><br />
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">WIP...</h3>
                        </div>
                        <div class="panel-body">
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div id="ui_page">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">介面設定</h3>
                        </div>
                        <div class="panel-body">
                            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                                <label for="candPerRow">每列顯示候選字個數: </label>
                                <input type="text" id="candPerRow" name="candPerRow" /><br />
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                                <label for="candPerPage">每頁顯示候選字個數: </label>
                                <input type="text" id="candPerPage" name="candPerPage" /><br />
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                                <label for="candMaxItems">最大候選字個數: </label>
                                <input type="text" id="candMaxItems" name="candMaxItems" /><br />
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                                <label for="fontSize">選字及訊息視窗文字大小: </label>
                                <input type="text" id="fontSize" name="fontSize" /><br />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">介面預覽</h3>
                        </div>
                        <div class="panel-body">
                            <div id="selExample">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--
            <input type="checkbox" id="colorCandWnd" name="colorCandWnd" />
            <label for="colorCandWnd">用不同顏色顯示選字鍵和候選字: <label><br />
            -->
        </div>


        <div id="keyboard_page">
            <div class="row">
                <div class="col-sm-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">鍵盤對應</h3>
                        </div>
                        <div id="keyboard_layout" class="panel-body">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="hidden-xs hidden-sm col-md-12 col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">鍵盤預覽</h3>
                        </div>
                        <div id="keyboard_preview" class="panel-body">
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div id="cin_count">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="totalchardefs">總計: </label><font color="Blue">
                    <label id="totalchardefs" name="totalchardefs" /></font>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="big5F">Big5 常用字: </label><font color="Blue">
                    <label id="big5F" name="big5F" /></font>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="big5LF">Big5 次常用字: </label><font color="Blue">
                    <label id="big5LF" name="big5LF" /></font>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="big5S">Big5 符號: </label><font color="Blue">
                    <label id="big5S" name="big5S" /></font>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="big5Other">Big5 其它漢字: </label><font color="Blue">
                    <label id="big5Other" name="big5Other" /></font>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="cjk">CJK 統一漢字: </label><font color="Blue">
                    <label id="cjk" name="cjk" /></font>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="cjkExtA">CJK 擴展 A 區: </label><font color="Blue">
                    <label id="cjkExtA" name="cjkExtA" /></font>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="cjkExtB">CJK 擴展 B 區: </label><font color="Blue">
                    <label id="cjkExtB" name="cjkExtB" /></font>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="cjkExtC">CJK 擴展 C 區: </label><font color="Blue">
                    <label id="cjkExtC" name="cjkExtC" /></font>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="cjkExtD">CJK 擴展 D 區: </label><font color="Blue">
                    <label id="cjkExtD" name="cjkExtD" /></font>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="cjkExtE">CJK 擴展 E 區: </label><font color="Blue">
                    <label id="cjkExtE" name="cjkExtE" /></font>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="cjkExtF">CJK 擴展 F 區: </label><font color="Blue">
                    <label id="cjkExtF" name="cjkExtF" /></font>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="bopomofo">注音符號: </label><font color="Blue">
                    <label id="bopomofo" name="bopomofo" /></font>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="cjkOther">其它字集: </label><font color="Blue">
                    <label id="cjkOther" name="cjkOther" /></font>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="phrases">詞彙: </label><font color="Blue">
                    <label id="phrases" name="phrases" /></font>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="cjkCI">CJK 相容區: </label><font color="Blue">
                    <label id="cjkCI" name="cjkCI" /></font>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="cjkCIS">CJK 相容補充區: </label><font color="Blue">
                    <label id="cjkCIS" name="cjkCIS" /></font>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <label for="privateuse">Unicode 私用區: </label><font color="Blue">
                    <label id="privateuse" name="privateuse" /></font>
                </div>
            </div>
        </div>


        <div id="cin_options">
            <input type="checkbox" id="ignorePrivateUseArea" name="ignorePrivateUseArea" />
            <label for="ignorePrivateUseArea">載入碼表時忽略 Unicode 私用區及 CJK 相容區</label><br />
        </div>


        <div id="extendtable_page">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">擴展碼表</h3>
                </div>
                <div class="panel-body">
                    <input type="checkbox" id="userExtendTable" name="userExtendTable" />
                    <label for="userExtendTable">自訂擴展碼表</label><br />
                    <input type="checkbox" id="reLoadTable" name="reLoadTable" />
                    <input type="checkbox" id="priorityExtendTable" name="priorityExtendTable" />
                    <label for="priorityExtendTable">優先載入擴展碼表</label><br />
                    <p>
                    以下是使用自訂擴展碼表的設定，每一行表示一個編碼所對應的字串，
                    例如在酷倉模組中可自訂「mwhgr 酷」或是「yta 音」等。<br />
                    每一行的格式必須符合：「Ta Tb」。其中 Ta 與 Tb 間必須有一個半形空白字元；<br />
                    Ta 請符合該模組碼表的格式及最大編碼字元數；Tb 可以是單個中文字串、符號或詞彙。
                    </p>
                    <textarea id="extendtable" class="form-control" rows="20"></textarea>
                </div>
            </div>
        </div>


        <div id="symbols_page">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">特殊符號</h3>
                </div>
                <div class="panel-body">
                    本輸入法模組提供符號表，裡面的符號可以自訂。
                    以上是符號表的設定檔，語法相當簡單。<br />
                    每一行的內容都是： 「分類名稱」=「此分類下的所有符號」。<br />
                    您也可以一行只放一個符號，則該符號會被放在最上層選單。
                    </p>
                    <textarea id="symbols" class="form-control" rows="20"></textarea>
                </div>
            </div>
        </div>


        <div id="fs_symbols_page">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">全形標點</h3>
                </div>
                <div class="panel-body">
                    <input type="checkbox" id="fullShapeSymbols" name="fullShapeSymbols" />
                    <label for="fullShapeSymbols">中文模式下按住 Shift 輸入全形標點符號</label><br />

                    <input type="checkbox" id="directOutFSymbols" name="directOutFSymbols" />
                    <label for="directOutFSymbols">允許全形標點連續輸入</label><br />
                    <p>
                    以下是使用 Shift 輸入全形標點符號的設定，每一行表示一個 Shift+符號/數字鍵所對應的字串。<br />
                    每一行的格式必須符合：「Ta=Tb」。其中 Ta 與 Tb 間必須有一個半形「=」字元；<br />
                    Ta 可以是 Shift+符號/數字鍵所輸出的符號；Tb 可以是任意中英文字串,每個字元都會成為一個候選符號。
                    </p>
                    <textarea id="fs_symbols" class="form-control" rows="20"></textarea>
                </div>
            </div>
        </div>

        <div id="ez_symbols_page">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">簡易符號</h3>
                </div>
                <div class="panel-body">
                    <input type="checkbox" id="easySymbolsWithShift" name="easySymbolsWithShift" />
                    <label for="easySymbolsWithShift">中文模式下按住 Shift 快速輸入符號</label><br />
                    <p>
                    以下是使用 Shift 快速輸入符號的設定，每一行表示一個鍵所對應的字串，
                    例如「m 新酷音」或是「L orz」等。<br />
                    每一行的格式必須符合：「Ta Tb」。其中 Ta 與 Tb 間必須有一個半形空白字元；<br />
                    Ta 可以是 a-z 等字母；Tb 可以是長度 1 到 10 的任意中英文字串。
                    </p>
                    <textarea id="ez_symbols" class="form-control" rows="20"></textarea>
                </div>
            </div>
        </div>

        <div id="phrase_page">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">聯想字詞</h3>
                </div>
                <div class="panel-body">
                    <input type="checkbox" id="showPhrase" name="showPhrase" />
                    <label for="showPhrase">中文模式下輸出字串後顯示聯想字詞</label><br />
                    <p>
                    本輸入法模組提供聯想字詞表，裡面的聯想字詞可以自訂。
                    以上是聯想字詞表的設定檔，語法相當簡單。<br />
                    每一行的內容都是： 「中字」=「此中字相關的聯想字詞」。
                    若想要設定的聯想字詞不只一個，請以「,」號區隔。
                    </p>
                    <textarea id="phrase" class="form-control" rows="20"></textarea>
                </div>
            </div>
        </div>

        <div id="flangs_page">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">外語文字</h3>
                </div>
                <div class="panel-body">
                    本輸入法模組提供外語文字表，裡面的外語文字可以自訂。
                    以上是外語文字表的設定檔，語法相當簡單。<br />
                    每一行的內容都是： 「分類名稱」=「此分類下的所有符號」。<br />
                    您也可以一行只放一個文字，則該文字會被放在最上層選單。
                    </p>
                    <textarea id="flangs" class="form-control" rows="20"></textarea>
                </div>
            </div>
        </div>

        <div id="navbar_bottom">
            <nav class="nav navbar-inverse navbar-fixed-bottom">
                <div class="container">
                    <div class="nav navbar-nav navbar-center">
                        <button id="ok" type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-floppy-saved glyphicon-size18 text-danger"></span> 套用設定</button>
                    </div>
                </div>
            </nav>
            <nav class="nav navbar-inverse navbar-hidden">
                <div class="container">
                    <div class="nav navbar-nav navbar-center">
                        <button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-floppy-saved glyphicon-size18 text-danger"></span> 套用設定</button>
                    </div>
                </div>
            </nav>
        </div>

    </body>
</html>
